<template>
  <div>
    <el-card style="margin:20px">
      <!-- 搜索栏 -->
      <el-row :inline="true" type="flex">
        <!-- 表单 -->
        <el-form :inline="true" :model="formData" :label-position="labelPosition">
          <el-form-item label="入库单号">
            <el-input v-model="formData.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="运单编号">
            <el-input v-model="formData.billCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="货主名称">
            <el-input v-model="formData.ownerName" placeholder="请输入" />
          </el-form-item>
          <el-form-item style="margin-top:50px ; margin-left:200px">
            <el-button class="search" round @click="searchBtn">搜索</el-button>
          </el-form-item>
          <el-form-item style="margin-top:50px">
            <el-button round style="color:black" class="reset" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-card style="margin:20px">
      <el-button class="add-btn" round @click="$router.push('/stock/godown-entry/details')">新增入库单</el-button>
      <el-button round style="color:black" @click="getTaskBtn">生成收获任务</el-button>
      <!-- 表单 -->
      <template>
        <el-table
          :data="tableData"
          height="300"
          border
          style="width: 70vw; margin:20px"
          header-align="center"
          align="center"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="40"
            fixed
          />
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="code"
            label="入库单号"
            width="150"
          />
          <el-table-column
            prop="billCode"
            label="运单编号"
            width="120"
          />
          <el-table-column
            prop="planArrivalTime"
            label="计划到达时间"
            width="120"
          />
          <el-table-column
            sortable
            prop="ownerCode"
            label="货主编号"
            width="150"
          />
          <el-table-column
            sortable
            prop="ownerName"
            label="货主名称"
            width="120"
          />
          <el-table-column
            prop="warehouseId"
            label="仓库名称"
            width="120"
          />
          <el-table-column
            prop=""
            label="车牌号"
            width="120"
          />
          <el-table-column
            prop="deliveryName"
            label="送货名称"
            width="120"
          />
          <el-table-column
            prop="deliveryPhone"
            label="送货人电话"
            width="120"
          />
          <el-table-column
            prop="status"
            label="入库单状态"
            width="120"
          />
          <el-table-column
            prop="planNum"
            label="预计到货数"
            width="120"
          />
          <el-table-column
            prop="createName"
            label="创建人"
            width="120"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="$router.push(`/stock/godown-entry/list-details/${scope.row.id}`)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="+pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
        />
      </el-row>
    </el-card>
    <el-dialog :visible="isShowdialog2" title="生成收货任务" width="30%" @close="OKBtn">
      <el-row type="flex" justify="center" align="center">
        <div class="divContent">
          <span style="display: block">1个收货任务生成失败！</span>
          <span>失败原因如下</span>
        </div>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button style="margin:20px 20px -5px" round type="success" @click="OKBtn">确定</el-button>

      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getStockPageDetail, searchStockPageDetail } from '@/api/stork'

export default {

  data() {
    return {
      isShowdialog: false,
      isShowdialog2: false,
      labelPosition: 'top',
      formData: {
        code: '', // 入库单号
        billCode: '', // 运单编号
        ownerName: '' // 货主名称
      },
      // 入库单列表
      tableData: [],
      // 分页数据
      total: 0,
      pageInfo: {
        size: 2,
        current: 1
      },
      // 被选中的数组
      multipleSelection: []
    }
  },
  created() {
    // 进入页面渲染数据
    this.loadpage()
  },
  methods: {
    // 封装查询请求(渲染)
    async loadpage() {
      const res = await getStockPageDetail()
      console.log(res.data.data.records)
      this.tableData = res.data.data.records
      this.total = res.data.data.records.length
    },
    // 搜索
    async searchBtn() {
      const res = await searchStockPageDetail(this.formData)
      console.log(res.data.data.records)
      this.tableData = res.data.data.records
    },
    // 重置
    resetBtn() {
      // 清空
      this.formData = {
        code: '', // 入库单号
        billCode: '', // 运单编号
        ownerName: '' // 货主名称
      }
      this.loadpage()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 生成任务按钮
    getTaskBtn() {
      if (this.multipleSelection.length !== 0) {
        this.isShowdialog2 = true
      } else {
        this.$message('请选择入库单')
      }
    },
    // 确定按钮
    OKBtn() {
      this.isShowdialog2 = false
    }

  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog__header{
  background: #fff;
  .el-dialog__title{
    color: black;
    line-height: 24px;
    font-size: 18px;

  }
  .el-icon-close:before{
    color: black;
  }

}
.divContent{
    width: 38vw;
    height: 15vw;
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    display: flex;
    justify-content: center;

  }
   .el-table__header th {
     text-align: center; /* 设置表头文字居中 */
  }
.cell {
 .el-button--text {
  color: $table-operate;
 }
}

.search{
  background-color: $btn-search
}
.reset{
  background-color: $btn-reset
}
.add-btn {
 width: 120px;
 margin: 10px 0;
 background-color: $table-add;
 color: white;

}
</style>
